<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>Node Removal Events Example</title>
    <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
    <ul id="myList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <p>This example shows the use of mutation events. Not all browsers support this. Safari 3 is known to support mutation events.</p>
    <script type="text/javascript">
        EventUtil.addHandler(window, "load", function(event){
            var list = document.getElementById("myList");
            
            EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
                alert(event.type);
                alert(event.target);
            });
            EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
                alert(event.type);
                alert(event.target);
                alert(event.relatedNode);
            });
            EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument", function(event){
                alert(event.type);
                alert(event.target);
            });            
            
            list.parentNode.removeChild(list);
        });

    </script>
</body>
</html>
